{% extends "map/new_base.html" %}


{% block javascript %}
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BR_tirkabJaindNc0FoauOGCOWtrBTLuwigpG4UD6tSDw3AxxYNXLmcVg" type="text/javascript">
  </script> 
  <script src="assets/javascript/PolylineEncoder.js" type="text/javascript"></script>
  <script src="assets/javascript/tracker.js" type="text/javascript"></script>
{% endblock %}
  
{% block bodytag %} onload="load()" onunload="GUnload()" {% endblock %}

{% block page_middle %}
<h1>Add a walk around Potton.</h1>
<h2>How to use</h2>
<ul>
<li>Centre the map near to where you are going to start the walk (by clicking and dragging the map) and set the zoom level accordingly (using the slider).  Don't worry about being zoomed in too far, the
map will automatically pan when you start to add points on the walk.
<li>Once you are ready to start drawing your walk click the <u>"Start Tracking"</u> button.
<li>Now, every time you click on the map a way-point will be added, the start of your walk will be shown by a red marker.
<li>Move to the next point along the walk and click again. Repeat this to draw your walk on to the map.
<li>Once you have completed adding all the points along your walk around Potton click the <u>"Finish Tracking"</u> button.
<li> If you are happy with the walk click the <b>"Submit"</b> button.
</ul>
Don't worry if you make a mistake, use the "Clear last" button to remove the last point added, click it again and the previous point will be removed.  Or 
simply click the "Clear all" button to start again.
<br />
<br />
<div style="display: none;">
<form id="initialLocationForm" onsubmit="gotoAddress(); return false;" action="">
	<p>
		Initial location: 
		<input type="text" name="address" size="70" /> 
	</p>

</form>
</div> 

<div id="message" style="display: none;" ></div>
<div id="map" style="width:100%; height:500px"></div>
<form id="output_form" action="/addwalk" method="POST">
	<p>
		<input type="button" name="start_track" value="Start tracking"
		onclick="start_track_command()" />
		<input type="button" name="stop_track"  value="Finish tracking"
		onclick="stop_track_command()" />
		<input type="button" name="clear_last"  value="Clear last"
		onclick="clear_last_command()" />
		<input type="button" name="clear_all"  value="Clear all"
		onclick="clear_all_command()" />
		<br />
		<div style="display: none;">
		Path update: 
		<input type="radio" name="updateRadio" onclick="setUpdate(1)" />

		Last five
		<input type="radio" name="updateRadio" onclick="setUpdate(2)" />
		All
	</p>

	<p>
	verySmall: 
	<input type="text" size="10" name="verySmall" />
	<br />
	numLevels: 
	<input type="text" size="10" name="numLevels" />
	<br />

	zoomFactor: 
	<input type="text" size="10" name="zoomFactor" />
	</p>
	<p>Encoded polyline</p>
	<div>
	<textarea rows="11" cols="50" name="results" wrap="off"></textarea>
	</div>
	</div>
	<input name="name" type="text" size="50">  Give your walk a descriptive name <br />
	<textarea name="descr" cols="50" rows="5" maxlength="4000" ></textarea> And a brief description <br />
	<input style="font-weight: bold;" id="submitbutton" type="submit" value="Submit" name="submit" disabled="DISABLED" />
</form>

{% endblock %}

{% block page_left %}
  {% include 'map/default_pageleft.html' %}
{% endblock %}

{% block page_right %}
  {% include 'map/default_pageright.html' %}
{% endblock %}
